<template>
	<view>

		<!-- 导航栏 -->
		<u-navbar title="实名认证" titleStyle='font-weight:bold;' bgColor='transparent' :autoBack="true">
		</u-navbar>
		<!-- end -->

		<view class="bg-top">
			<image class="w-100p" style="height: 540rpx;" src="https://yjgs.jsonbug.com/test/realAuthbg.png"
				mode="aspectFill"></image>
		</view>
		<view style="margin-top: -240rpx;">
		</view>
		<view class="m-20 p-30 box-card shadow-2 br-30 bg-white pos-r">
			<view>
				<text class="fw fs-32">填写个人信息</text>
			</view>
			<view class="mt-40">
				<view class="flex ac ">
					<view>
						<text class="fs-28 c-333">您的姓名</text>
					</view>
					<view class="ml-20">
						<input v-model="form.name" placeholder="请填写您的真实姓名" />
					</view>
				</view>
				<view class="w-100p mt-20" style="height: 1rpx;background-color: #E6E6E6;"></view>
			</view>
			<view class="mt-20">
				<view class="flex ac ">
					<view>
						<text class="fs-28 c-333">身份证号</text>
					</view>
					<view class="ml-20">
						<input v-model="form.cardNum" placeholder="请填写您的身份证号" />
					</view>
				</view>
				<view class="w-100p mt-20" style="height: 1rpx;background-color: #E6E6E6;"></view>
			</view>

			<view class="mt-50">
				<text class="fw fs-32">上传身份证</text>
			</view>

			<view class="mt-20 flex ac p-10" style="gap: 20rpx;">
				<view @click="uploadImg('A')" class="f1">
					<view>
						<image v-if="!form.cardA" style="height: 200rpx;width: 310rpx;"
							src="https://yjgs.jsonbug.com/test/sfzA.png">
						</image>
						<image mode="aspectFill" v-else style="height: 200rpx;width: 310rpx;"
							:src="$timer.ensureUrl(form.cardA)">
						</image>
					</view>
					<view class="wfc mlr mt-10">
						<text class="fs-30 fw">上传头像面</text>
					</view>
				</view>
				<view @click="uploadImg('B')" class="f1">
					<view>
						<image v-if="!form.cardB" style="height: 200rpx;width: 310rpx;"
							src="https://yjgs.jsonbug.com/test/sfzB.png">
						</image>
						<image mode="aspectFill" v-else style="height: 200rpx;width: 310rpx;"
							:src="$timer.ensureUrl(form.cardB)">
						</image>
					</view>
					<view class="wfc mlr mt-10">
						<text class="fs-30 fw">请上传国徽面</text>
					</view>
				</view>
			</view>

			<view class="mt-30">
				<text class="iconfont-yjgs  c-999">
					&#xe639;
				</text>
				<text class="fs-26 c-999 ml-5">证件文字及照片需清晰辨认，格式JPG或PNG，小于5M，无遮挡或模糊</text>
			</view>
		</view>


		<view @click="submit" class="submit">
			确认提交
		</view>

	</view>
</template>

<script>
	import {
		cardUserRealCreate,
		cardUserRealDetail
	} from '@/api/extend.js'
	export default {
		data() {
			return {
				form: {
					id: '',
					name: '',
					cardNum: '',
					cardA: '',
					cardB: '',
				}
			}
		},
		onLoad() {
			this.getCardUserRealDetail();
		},
		methods: {
			getCardUserRealDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				cardUserRealDetail().then(res => {
					uni.hideLoading();
					if (res.status == 200 && !this.$timer.isEmpty(res.data)) {
						let row = res.data;
						this.form.id = row.id;
						this.form.name = row.name;
						this.form.cardNum = row.card;
						this.form.cardA = row.image_head;
						this.form.cardB = row.image_back;
					}
				})
			},
			uploadImg(tag) {
				this.$util.uploadImageOne({
					url: 'upload/image',
					count: 1
				}, (res) => {
					if (tag == 'A') {
						this.form.cardA = res.data.path;
					} else {
						this.form.cardB = res.data.path;
					}
				});
			},
			submit() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return;
				}
				if (!this.form.cardNum) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return;
				} else {
					if (!uni.$u.test.idCard(this.form.cardNum)) {
						uni.showToast({
							title: '身份证不正确,请检查后重新填写',
							icon: 'none',
							duration: 4000
						})
						return;
					}
				}

				if (!this.form.cardA) {
					uni.showToast({
						title: '请上传头像面',
						icon: 'none'
					})
					return;
				}
				if (!this.form.cardB) {
					uni.showToast({
						title: '请上传国徽面',
						icon: 'none'
					})
					return;
				}

				cardUserRealCreate({
					id: this.form.id,
					name: this.form.name,
					card: this.form.cardNum,
					image_head: this.form.cardA,
					image_back: this.form.cardB,
				}).then(res => {
					if (res.status == 200) {
						uni.$emit('useAuth');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					}
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 4000
					});
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 4000
					});
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit:active {
		opacity: .5;
	}

	.submit {
		border-radius: 10rpx;
		text-align: center;
		line-height: 68rpx;
		color: white;
		margin: 20rpx;
		width: calc(100% - 40rpx);
		height: 68rpx;
		opacity: 1;
		background: #00009E;
		margin-top: 60rpx;
	}

	.box-card {
		background-color: white;
	}

	.bg-top {
		width: 100%;
		height: 700rpx;
		background-size: 100%;
	}
</style>